<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作节点</title>
        <style type="text/css">
            .wrapper { margin: 10px 0 ; border: 2px solid blue ; padding: 10px; }
            .wrapper>div { margin: 10px; border: 2px solid green ; padding: 5px;}
        </style>

        <script type="text/javascript">
            const x = {
                append(){
                    // 选择匹配于指定选择器的首个元素(若不存在则返回null)
                    let w = document.querySelector( '.wrapper' );
                    // 创建一个元素节点(Node.ELEMENT_NODE)
                    let n = document.createElement( 'div' );
                    // 为 新的元素节点 设置内容
                    n.innerHTML = new Date().toISOString();
                    // Node.prototype.appendChild( newNode );
                    w.appendChild( n ); // 将 n 追加到 w 内部末尾
                },
                insert(){
                    const w = document.querySelector( '.wrapper' );
                    // const ref = document.querySelector( '.wrapper>div:nth-child(2)' );
                    const ref = w.firstChild.nextSibling.nextSibling ;
                    let node = document.createElement( 'div' );
                    node.innerHTML = new Date().toISOString();
                    // Node.prototype.insertBefore( newNode );
                    w.insertBefore( node , ref ); // 将 node 插入到 w 内部的 ref 节点之前
                },
                remove(){
                    const p = document.querySelector( '.wrapper' );
                    let node = p.lastChild ;
                    // 若 node 存在才继续后续操作
                    if( node ) {
                        if( node.nodeType === Node.TEXT_NODE ) {
                            alert( '刚才删除了一个空白节点哦' );
                        }
                        // Node.prototype.removeChild( node )
                        p.removeChild( node ); // 从 p 节点内部删除 node 节点
                    }
                },
                replace(){
                    const p = document.querySelector( '.wrapper' );
                    let old = p.lastChild.previousSibling ;
                    let node = document.createElement( 'div' );
                    node.innerHTML = new Date().toISOString();
                    p.replaceChild( node , old );
                },
                root(){
                    const x = document.querySelector( '.wrapper' );
                    const root = x.getRootNode();
                    alert( root.nodeType + " , " + root.nodeName );
                    console.log( root === document );
                },
                has(){
                    const x = document.querySelector( '.wrapper' );
                    alert( x.hasChildNodes() );
                },
                contains(){
                    let node = document.querySelector( 'body' );
                    let another = document.querySelector( '.wrapper>div:first-child' );
                    // let another = document.querySelector( '.buttons' );
                    console.log( node.contains( another ) );
                },
                clone( deep ) {
                    let node = document.querySelector( '.wrapper' );
                    let newNode = node.cloneNode( deep );
                    document.body.appendChild( newNode );
                }
            }
        </script>

    </head>
    <body>

        <div class="buttons">
            <button onclick="x.append()">appendChild</button>
            <button onclick="x.insert()">insertBefore</button>
            <button onclick="x.remove()">removeChild</button>
            <button onclick="x.replace()">replaceChild</button>
            <button onclick="x.root()">rootNode</button>
            <button onclick="x.has()">hasChildNodes</button>
            <button onclick="x.clone(true)">cloneNode(true)</button>
            <button onclick="x.clone(false)">cloneNode(false)</button>
        </div>

        <div class="wrapper">
            <div>first</div>
            <div>second</div>
            <div>third</div>
        </div>
        
    </body>
</html>